<template>
	<view class="my-content">
		<div class="between p-30" style="padding-top: 0px;">
			<div class="text-gray-900 fz36" :class="{'active': menu_type === 1}" @click="menu_type = 1;getOrder(true)">
				已预约</div>
			<div class="text-gray-900 fz36" :class="{'active': menu_type === 3}" @click="menu_type = 3;getOrder(true)">
				待支付</div>
			<div class="text-gray-900 fz36" :class="{'active': menu_type === 4}" @click="menu_type = 4;getOrder(true)">
				可放行</div>
		</div>
		
		<div class="p-10 mb-20" style="padding-top: 0;" >
			<view class="shadow  rounded-20 item" style="margin-bottom: 20px;" v-for="item in orderData">
				<!-- =========================电站========================= -->
		
				<div class="flex p-20" style="padding-bottom: 10rpx; ">
					<div class="w-full res-box">
						<div class="between w-full">
							<div class="flex">
								<text class="res-time" v-if="item.status==1">预约时间:{{item.create_at}}</text>
								<text class="res-time" v-if="item.status==2||item.status==3||item.status==4">进场时间:{{item.start_time}}</text>
								<text class="res-time" v-if="item.status==5||item.status==6">支付时间:{{item.paid_time}}</text>
								
							</div>
						</div>
						<view class="res-con">
							<view class="res-c" >
								<text v-if="item.car">车牌号：{{item.car.car_number}}</text>
								<text>车辆电话：{{item.car_tel}}</text>
							</view>
						</view>
						<block v-if="item.status==1">
							<!-- 已约显示 -->
							<view @click="jinchang(item.id)" class="res-end2" style="border-top: 1px solid #D8D8D8;">确认进场</view>
						</block>
						<block v-if="item.status==5||item.status==6">
							<!-- 已约显示 -->
							<view @click="fangxing(item.id)" class="res-end2" style="border-top: 1px solid #D8D8D8;">确认放行</view>
						</block>
					</div>
				</div>

			</view>
			
			
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id:'',
				page: 1,
				menu_type: 1 ,//1已预约 2充电中 3待支付 4待评价 5已完成
				orderData:[]
			}
		},
		onShareAppMessage() {
			
			return {
				title: '泊车充电',
				path: '/pages/my/order/handle?user_id='+this.user_id
			}
			
		},
		onLoad(option) {
			this.user_id = option.user_id
			this.getOrder()
		},
		methods: {
			async getOrder(init) {
				if (init) {
					this.page = 1
				}
				this.orderData = [];
				uni.showLoading({
					title: "正在加载"
				})
				const res = await this.http("post", "/api/order/master_order", {
					user_id: this.user_id,
					page:this.page,
					menu_type: this.menu_type
				})
				uni.hideLoading()
				this.orderData = res.data
			},
			async jinchang(id){
				var that = this
				const res = await this.http("post", "/api/order/handle_order", {
					id: id,
				})
				uni.showToast({
					title:'进场成功'
				})
				setTimeout(function(){
					that.getOrder()
				},1000)
			},
			async fangxing(id){
				var that = this
				const res = await this.http("post", "/api/order/fangxing_order", {
					id: id,
				})
				uni.showToast({
					title:'放行成功'
				})
				setTimeout(function(){
					that.getOrder()
				},1000)
			}
		}
	}
</script>

<style lang="less" scoped>
	.item {
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3) !important;
	}
	
	.active {
		color: #3662EC;
		font-weight: bold;
	}
	
	page {
		height: 100%;
	}
	
	.my-content {
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
	
		.res-box {
			width: 100%;
	
			.res-time {
				font-size: 28upx;
				color: #A6A6A6;
				display: block;
				margin-bottom: 10upx;
			}
	
			.res-con {
				width: 100%;
				border-radius: 16upx;
				overflow: hidden;
				// box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
				margin-bottom: 20upx;
				position: relative;
	
				.jiao {
					position: absolute;
					top: 10upx;
					right: 10upx;
					width: 40upx;
					height: 40upx;
					border-radius: 8upx;
					background: #FA5151;
					color: #fff;
					font-size: 24upx;
					text-align: center;
					line-height: 40upx;
				}
	
				.res-top {
					width: 100%;
					display: flex;
	
					.res-top-l {
						width: 40upx;
						font-size: 24upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
					}
	
					.res-top-c {
						display: flex;
						align-items: center;
						width: 90%;
						padding: 10upx;
						box-sizing: border-box;
	
						.res-img {
							width: 100upx;
							height: 100upx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 10upx;
	
							image {
								width: 100%;
								height: auto;
							}
						}
	
						.res-text {
							.res-flex {
								display: flex;
	
								text {
									min-width: 200upx;
									margin-right: 40upx;
								}
							}
	
							.res-title {
								font-size: 28upx;
								color: #000;
							}
	
							.green {
								color: #00B578;
							}
	
							text {
								display: block;
								font-size: 24upx;
								color: #9E9E9E;
							}
						}
					}
				}
	
				.res-c {
	// 				width: 100%;
	// 				padding: 10upx 20upx;
	// 				box-sizing: border-box;
	// 				border-top: 1px solid #D8D8D8;
	// 				border-bottom: 1px solid #D8D8D8;
	// 				line-height: 45rpx;
	
					text {
						display: block;
						font-size: 28upx;
						color: #000;
						margin-bottom: 5upx;
					}
				}
	
				.res-b {
					font-size: 36upx;
					color: #3662EC;
					font-weight: 600;
					padding: 10upx 0;
					text-align: center;
				}
	
				.res-end {
					font-size: 28upx;
					color: #A6A6A6;
					text-align: center;
					padding: 10upx 0;
				}
			}
		}
	}
	
	.res-end2 {
		font-size: 36upx;
		color: #3662EC;
		font-weight: 600;
		text-align: center;
		padding: 10upx 0;
	}
</style>